<template>
  <div>

    <el-menu
        class="el-menu-vertical-demo"
        default-active="2"
        style="width: 200px;min-height: calc(100vh - 70px)"
        @close="handleClose"
        @open="handleOpen"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <House/>
          </el-icon>
          <span>宠物健康档案管理</span>
        </template>
        <el-menu-item-group title="宠物">
          <el-menu-item index="1-1">基本信息</el-menu-item>
          <el-menu-item index="1-2">健康状况</el-menu-item>
          <el-menu-item index="1-2">体检历史</el-menu-item>
        </el-menu-item-group>


      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon>
            <User/>
          </el-icon>
          <span>用户信息管理</span>
        </template>
        <el-menu-item-group title="使用者">
          <el-menu-item index="2-1">管理员</el-menu-item>
          <el-menu-item index="2-2">普通用户</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>


      <el-menu-item index="3">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>系统公告管理</span>
      </el-menu-item>


      <el-menu-item index="4">

        <el-icon>
          <WarnTriangleFilled/>
        </el-icon>
        <span>疾病预警</span>

      </el-menu-item>
      <el-menu-item index="5">
        <el-icon>
          <Apple/>
        </el-icon>
        <span>宠物健康报告</span>
      </el-menu-item>
    </el-menu>
    <!--<el-icon><location/></el-icon>-->
  </div>
</template>

<script>
import {Apple, Tickets, House, User, WarnTriangleFilled} from "@element-plus/icons-vue";

export default {
  name: "App.vue",
  components: {Apple, Tickets, House, User, WarnTriangleFilled}
}
</script>


<style scoped>

</style>